<template>
	<view class="reservation">
		<navBar :title="$t('equipment.reservation')"></navBar>
		<view class="item-wrap">
			<view class="item-box flex_s w_90" v-for="(item,index) in scheduleTaskList">
				<view class="left">
					<view class="font_size_32">{{item.workModeName}}</view>
					<view class="font_size_26 color_theme">{{item.executeTime}}开始</view>
				</view>
				<view class="right" @click="handleDelete(item.id)">
					<uni-icons type="trash" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		scheduleTaskList,
		deleteDeviceReservation
	} from '@/api/home.js'
	export default {
		data() {
			return {
				scheduleTaskList: [], //设备列表
				sn: '',
			};
		},
		onLoad(options) {
			this.sn = options.sn;
		},
		onShow() {
			this.getScheduleTaskList(); //获取预约列表
		},
		methods: {
			// 获取预约列表
			getScheduleTaskList() {
				scheduleTaskList({
					sn: this.sn
				}).then((r) => {
					this.scheduleTaskList = r.data;
				});
			},
			handleDelete(id) {
				deleteDeviceReservation({
					id: id
				}).then((r) => {
					if (r.code === 0) {
						this.config.Toast('删除成功');
						this.getScheduleTaskList();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reservation {
		.item-wrap {
			.item-box {
				background: #fff;
				margin: 20rpx auto;
				padding: 25rpx 31rpx 22rpx 43rpx;
				box-sizing: border-box;
				border-radius: 20rpx;

				.left {
					line-height: 45rpx;
				}
			}
		}
	}
</style>